<template>
  <el-skeleton class="discover" :loading="false" animated :throttle="500">
    <template #default>
      <el-carousel v-if="bannerList[0]" class="swiper" type="card">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.imageUrl" style="width: 860px" />
        </el-carousel-item>
      </el-carousel>
      <div class="recommend">
        <p class="fw700">推荐歌单</p>
        <div class="recommend-list">
          <el-card :body-style="{ padding: '0px' }" class="item" v-for="(item, index) in recommendList" ::key="index">
            <div class="image" @click="handleSongList(item)">
              <img class="bigger" :src="item.picUrl" alt="" />
              <span class="play-count">
                <span class="iconfont icon-player-play icon mr5"></span>
                <span>{{playCount(item.playCount)}}</span>
              </span>
              <div class="player">
                <span class="iconfont icon-Playerplay icon"></span>
              </div>
            </div>
            <div class="m5 f14">
              <el-popover placement="top-start" :width="270" trigger="click" :hide-after="100" :content="item.name">
                <template #reference>
                  <span class="oh">{{ item.name }}</span>
                </template>
              </el-popover>
            </div>
          </el-card>
        </div>
      </div>
      <div class="new-music mb10">
        <p class="fw700">最新音乐</p>
        <div class="new-music-list">
          <el-card @click="playMusic(item)" :body-style="{ padding: '0px' }" class="card" v-for="(item,index) in newMusicList" :key="index">
            <div class="item">
              <div class="image">
                <img class="bigger" :src="item.picUrl" />
                <div class="player">
                  <span class="iconfont icon-Playerplay icon"></span>
                </div>
              </div>
              <div class="content">
                <div class="song-name ml10">{{item.name}}</div>
                <div class="singer ml10">{{artists(item.song.artists)}}</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </template>
    <template #template>
      <div class="s-swiper">
        <el-skeleton-item variant="p" class="style1" />
        <el-skeleton-item variant="p" class="style2" />
        <el-skeleton-item variant="p" class="style1" />
      </div>
    </template>
  </el-skeleton>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted,computed } from 'vue'
import {useMusicStore} from '@/store/music.js'
import {useRouter} from 'vue-router'
const router=useRouter()
const musicStore=useMusicStore()
const { proxy } = getCurrentInstance()
// 获取轮播图数据
let bannerList = ref([])
let getBanner = async () => {
  let { banners } = await proxy.$api.getBanner()
  if (banners) {
    bannerList.value = banners
  }
}
// 点击轮播图事件
let handleBannerClick = (url) => {
  if (url) {
    window.location.href = url
  }
}
// 获取推荐歌单数据
const recommendList = ref([])
let getRecommendList = async () => {
  let { result } = await proxy.$api.getRecommend()
  if (result) {
    recommendList.value = result
  }
}
// 跳转到歌单视图
let handleSongList=async(item)=>{
  let {playlist}=await proxy.$api.getSongListDetail2({id:item.id})
  musicStore.saveCurSongList(playlist)
  router.push({path:'songList'})
}

// 获取推荐新音乐
const newMusicList = ref([])
let getNewMusicList = async () => {
  let { result } = await proxy.$api.getNewMusic()
  if (result) {
    newMusicList.value = result
  }
}
// 音乐的创作者们
let artists=(val)=>{
  let artists=val.map(item=>item.name)
  return artists.join(' / ')
}
// 加载状态
let loading = ref(true)
// 播放音乐
let playMusic=async(music)=>{
  let {data}=await proxy.$api.getMusicUrl({id:music.id})
  let {songs}=await proxy.$api.getSongListDetail({ids:music.id})
  musicStore.saveCurPlayMusicUrl(data[0].url)
  musicStore.saveCurMusicInfo(songs[0])
  musicStore.setIsPlay(true)
}
// 获取最新音乐第一首歌曲信息/播放地址保存在pinia
let saveNewMusicFirst=async()=>{
  if(musicStore.curPlayMusicUrl==''){
    let firstNewMusic=newMusicList.value[0]
    let {data}=await proxy.$api.getMusicUrl({id:firstNewMusic.id})
    let {songs}=await proxy.$api.getSongListDetail({ids:firstNewMusic.id})
    musicStore.saveCurMusicInfo(songs[0])
    musicStore.saveCurPlayMusicUrl(data[0].url)
  }
}
let playCount=(val)=>{
  if(val<10000){
    return val
  }else if(val>9999&&val<100000000){
    return Math.floor(val/10000)+"万"
  }else{
    return Math.floor(val/100000000)+"亿"
  }
}
onMounted(async () => {
  await getBanner()
  await getRecommendList()
  await getNewMusicList()
  await saveNewMusicFirst()
  loading.value = false
})
</script>

<style lang="scss">
.discover {
  height: 100%;
}
.swiper{
  margin-top: 20px;
}
.recommend-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .item {
    margin-top: 10px;
    width: 19%;
    .image {
      position: relative;
      height: 0;
      padding-top: 100%;
      width: 100%;
      img {
        top: 0;
        left: 0;
        position: absolute;
        width: 0;
        overflow: hidden;
      }
      // 图片放大和缩小
      .bigger {
        width: 100%;
        height: 100%;
        transition: transform 1s;
      }

      .bigger:hover {
        transform: scale(1.045, 1.045);
      }
      .play-count {
        display: flex;
        align-items: center;
        color: #dbdde1;
        font-size: 14px;
        position: absolute;
        top: 10px;
        right: 10px;
      }
      // 播放
      .player {
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        border-radius: 50px;
        bottom: 25px;
        right: 25px;
        width: 50px;
        height: 50px;
        background-color: #e3e0d8;
      }
      &:hover .player {
        opacity: 0.7;
        transition-duration: 1.5s;
      }
      .player span {
        font-size: 25px;
        color: #18a058;
      }
    }
  }
}
.new-music-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  .card {
    border-radius: 8px;
    margin-top: 10px;
    width: 32.5%;
    height: 75px;
    .item {
      display: flex;
      .image {
        position: relative;
        height: 75px;
        img {
          height: 75px;
          border-radius: 8px;
        }
        .bigger {
          width: 100%;
          height: 100%;
          transition: transform 1s;
        }
        .bigger:hover {
          transform: scale(1.1, 1.1);
        }
        .player {
          opacity: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          border-radius: 50px;
          bottom: 25px;
          right: 25px;
          width: 25px;
          height: 25px;
          background-color: #e3e0d8;
        }
        &:hover .player {
          opacity: 0.7;
          transition-duration: 1s;
        }
        .player span {
          font-size: 25px;
          color: #18a058;
        }
      }
      .content {
        height: 75px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .singer {
          font-size: 14px;
          color: #7e8082;
        }
      }
    }
  }
  .item:hover {
    background-color: rgba($color: #000000, $alpha: 0.1);
  }
}
.s-swiper {
  display: flex;
  align-items: center;
  .style1 {
    flex: 1;
    height: 249px;
  }
  .style2 {
    flex: 2;
    height: 299px;
  }
}
</style>
